<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="../css/myequipment.css">
    <link rel="stylesheet" href="../css/deviceinfor.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/fontzize.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/choice.js"></script>
    <link href="../css/choice.min.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jsonAjax.js"></script>
</head>
<body>
<div id="app">
    <header>
        <nav @click="goback"><img src="../imgs/arrow_left.png"></nav>
        <nav>状态监测</nav>
        <nav></nav>
    </header>
    <section>
        <dl v-show="indexof('n001')">
            <dd>在线状态</dd>
            <dd class="color" v-if="getdata.is_online==1">在线</dd>
            <dd class="color" v-else>离线</dd>
        </dl>
        <dl v-show="indexof('8103')">
            <dd>电池电量</dd>
            <dd class="color">
                <div v-if="getdata.battery==0">
                    <div v-html="getdata.battery_volume+'%'" style="display: inline-block"></div>
                    <img src="../imgs/zhengchangfangdian.png"style="display: inline-block"></div>
                <div v-if="getdata.battery==1">
                    <div v-html="getdata.battery_volume+'%'" style="display: inline-block"></div>
                    <img src="../imgs/chongmanx.png" style="display: inline-block" ></div>
                <div v-if="getdata.battery==2">
                    <div v-html="getdata.battery_volume+'%'" style="display: inline-block"></div>
                    <img src="../imgs/didianliang.png" style="display: inline-block"></div>
                <div v-if="getdata.battery==3">
                    <img src="../imgs/chongdian.png" style="display: inline-block"></div>
            </dd>
        </dl>
        <dl v-show="indexof('8108')">
            <dd>旋转捡测</dd>
            <dd v-if="getdata.rotate==0" class="color">正常</dd>
            <dd v-if="getdata.rotate==1" class="color">故障</dd>
            <dd v-else></dd>
        </dl>
        <dl v-show="indexof('8107')">
            <dd>开盖捡测</dd>
            <dd v-if="getdata.uncap==0" class="color">正常</dd>
            <dd v-if="getdata.uncap==1" class="color">开盖</dd>
            <dd v-else></dd>
        </dl>
        <dl v-if="typesmg!=0&&indexof('810b')">
            <dd>GSM信号</dd>
            <dd class="color">
                <img v-if="getdata.gsm==0" src="../imgs/xinhaowu.png"/></dd>
            <img v-if="getdata.gsm==1" src="../imgs/xinhaoruo.png"/></dd>
            <img v-if="getdata.gsm==2" src="../imgs/xinhaozhong.png"/></dd>
            <img v-if="getdata.gsm==3" src="../imgs/xinhaoqiang.png"/></dd>
            <img v-if="getdata.gsm==4" src="../imgs/xinhaojiqiang.png"/></dd>
        </dl>
        <dl v-if="typewif!=0&&indexof('810a')">
            <dd>WIFI信号</dd>
            <dd class="color">
                <img v-if="getdata.wifi==0" src="../imgs/wuxinhaow.png"/>
                <img v-if="getdata.wifi==1" src="../imgs/wifiruo.png"/>
                <img v-if="getdata.wifi==2" src="../imgs/wifijiaoruo.png"/>
                <img v-if="getdata.wifi==3" src="../imgs/wifiyiban.png"/>
                <img v-if="getdata.wifi==4" src="../imgs/wifiqiang.png"/>
            </dd>
        </dl>
        <dl v-show="indexof('101a')">
            <dd>当前药格序号</dd>
            <dd class="color" v-html="getdata.current_ceil_id">
            </dd>
        </dl>
    </section>

</div>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",
        data: {
            getdata: {},
            networksmg: [],
            typesmg: 0,
            typewif: 0,
            networksmg: '',
            showdash: []

        },

        mounted: function () {
            var _this = this;
            //获取外部链接参数
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null)return unescape(r[2]);
                return null;
            }

            var myurl = GetQueryString("device_id");
            if (myurl != null && myurl.toString().length > 1) {
                _this.device_id = Number(GetQueryString("device_id").substr(1));
            }
            else {
                window.location.href = golinks("");
            }
            var role = GetQueryString("role");
            if (role != null && role.toString().length > 1) {
                _this.role = Number(GetQueryString("role").substr(1));

            }
            else {
                //window.location.href =golinks("");

            }
            var networksmg = GetQueryString("networksmg");
            if (networksmg != null && networksmg.toString().length > 1) {
                _this.networksmg = GetQueryString("networksmg").substr(1);

            }
            else {
                //window.location.href =golinks("");

            }
            var token = GetQueryString("token");
            if (token != null && role.toString().length > 1) {
                _this.token = GetQueryString("token").substr(1);

            }
            else {
                //window.location.href =golinks("");

            }
            var uid = GetQueryString("uid");
            if (uid != null && role.toString().length > 1) {
                _this.uid = Number(GetQueryString("uid").substr(1));

            }
            else {
                //window.location.href =golinks("");

            }
            //接口名称 12 获取设备状态监测信息√
            _this.dtcs(_this.device_id)
            jsonAjax('/Home/Device/get_device_status',
                {
                    access_token: _this.token,
                    device_id: _this.device_id,
                    uid: _this.uid
                }
            ).done(function (data) {
                if (data.code == 40002) {
                    //window.location.href=golinks('weixinsq.html')
                }
                else if (data.code == 40010) {
                    //window.location.href=golinks('weixinsq.html')
                }
                else if (data.code == 0) {
                    console.log(data)
                    console.log(data)
                    _this.getdata = data.data;

                }


            })
                .fail(function () {
                    console.log("error");
                });
            //typesw
            _this.networksmg = _this.networksmg.split(",");
            if (_this.networksmg.indexOf('GSM') != -1) {
                _this.typesmg = 1;
            } else {
                _this.typesmg = 0;
            }
            if (_this.networksmg.indexOf('WIFI') != -1) {
                _this.typewif = 1;
            } else {
                _this.typewif = 0;
            }

            console.log(_this.networksmg.indexOf('WIFI'));
            //=['GSM']


        },
        methods: {
            dtcs: function (e) {
                var _this = this;
                jsonAjax('/Home/Device/dynamic_device_params',
                    {access_token: this.token, device_id: e, uid: this.uid}
                ).done(function (data) {
                    console.log(data.data)
                    for (var i in data.data) {
                        _this.showdash.push(data.data[i].tag)
                    }

                });
            },
            indexof: function (item) {
                if (this.showdash.indexOf(item) == -1) {
                    return false;
                } else {
                    return true;
                }
            },
            goback: function () {
                console.log(this.dataindex);
                window.location.href = golinks("dmanagement/devicedetails.html?token=" + this.token + "&uid=" + this.uid + "&device_id=" + this.device_id + "&role=" + this.role + "&networksmg=" + this.networksmg + "&off=1")
            }

        }

    });

</script>
</body>

</html>

